<template>
  <cardBlock>
    <template #default>
      <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
        <a-form-item field="username" tooltip="请输入用户名" label="用户名">
          <a-input v-model="form.username" placeholder="请输入用户名" />
        </a-form-item>

        <a-form-item field="password" label="密码">
          <a-input v-model="form.password" placeholder="请输入密码" />
        </a-form-item>

        <a-form-item>
          <a-button html-type="submit">提交</a-button>
        </a-form-item>
      </a-form>
    </template>
  </cardBlock>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import cardBlock from "@/components/common/card-block/index.vue";
import { loginRequest } from "@/utils/request";
import { Message } from "@arco-design/web-vue";
import router from "@/router/route";

const form = reactive({
  username: "",
  password: "",
});
const handleSubmit = async () => {
  const res = await loginRequest.post("/user/login", {
    username: form.username,
    password: form.password,
  });

  if (res.data.code === 200) {
    if (res.data.token) {
      localStorage.setItem("jwtToken", res.data.token);
      localStorage.setItem("userInfo", JSON.stringify(res.data.user));
      router.push("/car/car-mall");
      Message.success("登录成功");
    } else {
      Message.error("数据获取失败，服务端未正确响应");
    }
  } else {
    Message.error(res.data.msg);
  }

  console.log(res);
};
</script>
